<template>
<div id="map" ref="rootMap">

</div>
</template>

<script>
import "ol/ol.css";
import {Map,View} from "ol";// Map 地图构造函数；View 视图层
import TileLayer from "ol/layer/Tile"; //瓦片层
// import OSM from "ol/source/OSM"; // ol自带的地图数据
import XYZ from "ol/source/XYZ";
// import mapconfig from '../config/mapConfig'
export default {
  name: "olMap",
  data(){
    return {
      map: null
    }
  },
  mounted() {
    // let mapcontainer = this.$refs.rootmap;
    this.map = new Map({
      target: "map",  //绑定的元素或者id,地图的容器
      layers: [  //图层，不定义会没有图层资源，渲染是按照提供的顺序渲染的
        new TileLayer({
          // source: new OSM()   //资源   个人理解：XYZ比OSM更详细
          source:new XYZ({
            url:"https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
          })
        })
      ],
      view: new View({  //地图的视图，不指定不会有图层资源
        projection: "EPSG:4326",    //使用这个坐标系
        center: [114.064839,22.548857],  //初始坐标 深圳----->将深圳作为地图中心
        zoom: 12  //放大倍数
      }),
      controls:[]
    });


    /*window.setTimeout(()=>{
      // let mapcontainer = this.$refs.rootMap;
      this.map = new Map({
        target: this.$refs.rootMap,
        layers: mapconfig.streetmap(),
        view: new View({
          projection: "EPSG:4326",    //使用这个坐标系
          center: [mapconfig.x,mapconfig.y],  //深圳
          zoom: mapconfig.zoom
        })
      });
    },500)*/
  },
  methods:{
  }
}
</script>

<style scoped>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>
